<template>
  <div class="container">
    <div class="content">
      <!-- 顶部左侧 -->
      <div class="left" @click="goHome">
        <img src="../../../public/vite.svg" alt="医疗通图标" class="logo">
        <h1>医疗通 预约挂号统一平台</h1>
      </div>
      <!-- 顶部中间---未来加入搜索框 -->
      <!-- 顶部右侧 -->
      <div class="right">
        <span><a href="#">帮助中心</a></span>
        <span><a href="#">登录/注册</a></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const $router = useRouter()

let goHome = () => {
  $router.push({ path: '/home' })
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;

  .content {
    background-color: #fdfdfd;


    width: 1200px;
    height: 70px;
    display: flex;
    justify-content: space-between;

    .left {
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 22px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

      img {
        height: 50px;
        width: 50px;
      }

      .logo:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
      }

      h1 {
        color: #2197ef;

      }
    }



    .right {

      display: flex;
      align-items: center;

      span {

        margin-right: 30px;

        a {
          color: #666;
          text-decoration: none;
        }

        a:hover {
          color: #2197ef;
          ;
        }
      }
    }
  }
}
</style>